<template>
	<view>
		<navbar></navbar>
		<view class="fs-50 dp-fc jc-sb p-all-32">
			<view class="p-0-32 br-15 pt-10 pb-10" :class="type===1?'bg-333 c-fff':'bg-fff c-333'" @click="opt(1)">
				中国传统色
			</view>
			<view class="p-0-32 br-15 pt-10 pb-10" :class="type===2?'bg-333 c-fff':'bg-fff c-333'" @click="opt(2)">
				日本传统色
			</view>
		</view>
		<view class="dp-f ai-c jc-sa fw-w">
			<view class="w-200 h-200 dp-fc br-15 shadow-blur box-s mt-32" v-for="(item,index) in color" :key="index" :style="'background-color:'+item.value+';'">
				<view class="dp-fc fd-c t-s c-fff">
					<text>{{index+1}}</text>
					<text class="mt-10">{{item.name}}</text>
					<text class="mt-10 fs-24">{{item.value}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		cnColor,
		jpColor
	} from '@/record/color.js'
	export default {
		data() {
			return {
				title: 'Hello',
				color: [],
				type: 1,
			}
		},
		onLoad() {
			this.color = cnColor
		},
		methods: {
			opt(type) {
				if (this.type === type) {
					return
				}
				this.type = type
				if (type === 1) {
					this.color = cnColor
				} else {
					this.color = jpColor
				}
			}
		}
	}
</script>

<style>
	.logo1 {
		height: 300rpx;
		width: 300rpx;
		transform: rotate(-45deg);
		margin-left: 60rpx;
	}

	.logo2 {
		height: 300rpx;
		width: 300rpx;
		transform: rotate(-45deg);
		margin-top: -50rpx;
		margin-left: 320rpx;
	}

	.shadow-blur {
		position: relative;
	}

	.shadow-blur::before {
		content: "";
		display: block;
		background: inherit;
		filter: blur(10rpx);
		position: absolute;
		width: 100%;
		height: 100%;
		top: 10rpx;
		left: 10rpx;
		z-index: -1;
		opacity: 0.4;
		transform-origin: 0 0;
		border-radius: inherit;
		transform: scale(1, 1);
	}
</style>
